<section layout="row" class="info-list-detail">
    <h2 flex="20">{/'Basic Information' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30"><h5>{/'Image' | translate/}</h5></div>
        <div flex="70"><p>{/serviceDetailCtrl.service.Spec.TaskTemplate.ContainerSpec.Image/}</p></div>
        <div flex="30"><h5>{/'Image Permissions' | translate/}</h5></div>
        <div flex="70">
            <p ng-class="{'no-info': !serviceDetailCtrl.service.Spec.RegistryAuth}">
                {/serviceDetailCtrl.service.Spec.RegistryAuth || ('Not configured' | translate)/}</p>
        </div>
        <div flex="30"><h5>{/'Task Number' | translate/}</h5></div>
        <div flex="70">
            <p data-ng-if="serviceConfigCtrl.service.Spec.Mode.Replicated"
               ng-class="{'no-info': !serviceConfigCtrl.service.Spec.Mode.Replicated.Replicas}">
                {/serviceConfigCtrl.service.Spec.Mode.Replicated.Replicas || ('Not configured' | translate)/}
            </p>
            <p data-ng-if="serviceConfigCtrl.service.Spec.Mode.Global">{/'Global' | translate/}</p>
        </div>
        <div flex="30">
            <h5 class="help-info">{/'StopGracePeriod' | translate/}<i class="fa fa-umbrella"></i>
                <md-tooltip md-direction="top">{/'StopGracePeriod Tooltip' | translate/}</md-tooltip>
            </h5>
        </div>
        <div flex="70">
            <p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.StopGracePeriod}">
                {/serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.StopGracePeriod / Math.pow(10, 9)|| ('Notconfigured' | translate)/}
            </p>
        </div>
        <div flex="30"><h5>{/'Container Dir' | translate/}</h5></div>
        <div flex="70">
            <p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Dir}">
                {/serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Dir || ('Not configured' | translate)/}
            </p>
        </div>
        <div flex="30"><h5>{/'Network' | translate/}</h5></div>
        <div flex="70" dm-empty-display="serviceConfigCtrl.service.Spec.Networks" dm-empty-text="Not configured">
            <ul>
                <li data-ng-repeat="network in serviceConfigCtrl.service.Spec.Networks">{/network/}</li>
            </ul>
        </div>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Limits">
    <h2 flex="20">{/'Resources Limits' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30">
            <h5>CPU
                <small>{/'Core' | translate/}</small>
            </h5>
        </div>
        <div flex="70"><p
                ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Limits.NanoCPUs}">
            {/serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Limits.NanoCPUs /
            Math.pow(10, 9) || ('Not configured' | translate)/}</p></div>

        <div flex="30">
            <h5>{/'Memory' | translate/}
                <small>MB</small>
            </h5>
        </div>
        <div flex="70"><p
                ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Limits.MemoryBytes}">
            {/serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Limits.MemoryBytes / (
            1024 * 1024) ||
            ('Not configured' | translate)/}</p>
        </div>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Reservations">
    <h2 flex="20">{/'Reservations' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30">
            <h5>CPU
                <small>{/'Core' | translate/}</small>
            </h5>
        </div>
        <div flex="70"><p
                ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Reservations.NanoCPUs}">
            {/serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Reservations.NanoCPUs
            / Math.pow(10, 9) || ('Not configured' | translate)/}</p></div>

        <div flex="30">
            <h5>{/'Memory' | translate/}
                <small>MB</small>
            </h5>
        </div>
        <div flex="70"><p
                ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Reservations.MemoryBytes}">
            {/serviceConfigCtrl.service.Spec.TaskTemplate.Resources.Reservations.MemoryBytes / ( 1024 *
            1024) || ('Not configured' | translate)/}</p>
        </div>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy">
    <h2 flex="20">{/'Fault Tolerant' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30"><h5>{/'RestartPolicy' | translate/}</h5></div>
        <div flex="70"><p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Condition}">
            {/TASK_RESTART_POLICY_COND[serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Condition] ||
            'Not configured' | translate/}</p>
        </div>
        <div flex="30">
            <h5 class="help-info">{/'Delay' | translate/}
                <small>{/'Second' | translate/}</small>
            </h5>
        </div>
        <div flex="70"><p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Delay}">
            {/serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Delay / Math.pow(10, 9) ||
            ('Not configured' | translate)/}</p>
        </div>
        <div flex="30">
            <h5>{/'Window' | translate/}
                <small>{/'Second' | translate/}</small>
            </h5>
        </div>
        <div flex="70">
            <p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Window}">
                {/serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.Window / Math.pow(10, 9) || ('Not configured' | translate)/}
            </p>
        </div>
        <div flex="30"><h5>{/'MaxAttempts' | translate/}</h5></div>
        <div flex="70">
            <p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.MaxAttempts}">
                {/serviceConfigCtrl.service.Spec.TaskTemplate.RestartPolicy.MaxAttempts || 'Not configured' |
                translate/}
            </p>
        </div>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.UpdateConfig">
    <h2 flex="20">{/'Rolling Update' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <div flex="30"><h5>{/'FailureAction' | translate/}</h5></div>
        <div flex="70"><p>{/serviceConfigCtrl.service.Spec.UpdateConfig.FailureAction === 'continue' ? 'continue' :
            'Stop' | translate/}</p></div>
        <div flex="30">
            <h5>{/'Interval' | translate/}
                <small>{/'Second' | translate/}</small>
            </h5>
        </div>
        <div flex="70"><p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.UpdateConfig.Delay}">
            {/serviceConfigCtrl.service.Spec.UpdateConfig.Delay / Math.pow(10, 9) || ('Not configured' |
            translate)/}</p></div>
        <div flex="30"><h5>{/'Update Parallelism' | translate/}</h5></div>
        <div flex="70"><p ng-class="{'no-info': !serviceConfigCtrl.service.Spec.UpdateConfig.Parallelism}">
            {/serviceConfigCtrl.service.Spec.UpdateConfig.Parallelism || ('Not configured' | translate)/}</p></div>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Env">
    <h2 flex="20">{/'Environment' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Env">
            <tr>
                <th>KEY</th>
                <th>VALUE</th>
            </tr>

            <tr ng-repeat="env in serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Env">
                <td>{/env.slice(0, env.indexOf('='))/}</td>
                <td>{/env.slice(env.indexOf('=') + 1)/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.Labels">
    <h2 flex="20">{/'Service Labels' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0" dm-empty-display="serviceConfigCtrl.service.Spec.Labels">
            <tr>
                <th>KEY</th>
                <th>VALUE</th>
            </tr>
            <tr ng-repeat="(key, value) in serviceConfigCtrl.service.Spec.Labels">
                <td>{/key/}</td>
                <td>{/value/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Labels">
    <h2 flex="20">{/'Container tag"' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Labels">
            <tr>
                <th>KEY</th>
                <th>VALUE</th>
            </tr>

            <tr ng-repeat="(key, value) in serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Labels">
                <td>{/key/}</td>
                <td>{/value/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail" ng-show="serviceConfigCtrl.service.Spec.EndpointSpec.Ports">
    <h2 flex="20">{/'Port Mapping' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0" dm-empty-display="serviceConfigCtrl.service.Spec.EndpointSpec.Ports">
            <tr>
                <th>{/'Host port' | translate/}</th>
                <th>{/'Protocol' | translate/}</th>
                <th>{/'Published Port' | translate/}</th>
            </tr>

            <tr ng-repeat="port in serviceConfigCtrl.service.Spec.EndpointSpec.Ports">
                <td>{/port.TargetPort/}</td>
                <td>{/port.Protocol/}</td>
                <td>{/port.PublishedPort/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Mounts">
    <h2 flex="20">{/'File mount' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Mounts">
            <tr>
                <th>{/'Host path' | translate/}</th>
                <th>{/'Permission' | translate/}</th>
                <th>{/'Container' | translate/}</th>
            </tr>

            <tr ng-repeat="mount in serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Mounts">
                <td>{/mount.Source/}</td>
                <td>{/mount.ReadOnly ? 'Read-only' : 'Read-Write' | translate/}</td>
                <td>{/mount.Target/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.Placement.Constraints">
    <h2 flex="20">{/'Constraints' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.Placement.Constraints">
            <tr>
                <th>KEY</th>
                <th>VALUE</th>
            </tr>

            <tr ng-repeat="constraint in serviceConfigCtrl.service.Spec.TaskTemplate.Placement.Constraints">
                <td>{/constraint.slice(0, constraint.indexOf('=='))/}</td>
                <td>{/constraint.slice(constraint.indexOf('==') + 1)/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Command">
    <h2 flex="20">{/'CMD' | translate/}</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Command">
            <tr>
                <th>CMD</th>
            </tr>

            <tr ng-repeat="cmd in serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Command">
                <td>{/cmd/}</td>
            </tr>
        </table>
    </div>
</section>

<section layout="row" class="info-list-detail"
         ng-show="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Args">
    <h2 flex="20">Args</h2>
    <div flex="80" layout="row" layout-wrap>
        <table cellpadding="0" cellspacing="0"
               dm-empty-display="serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Args">
            <tr>
                <th>Args</th>
            </tr>

            <tr ng-repeat="arg in serviceConfigCtrl.service.Spec.TaskTemplate.ContainerSpec.Args">
                <td>{/arg/}</td>
            </tr>
        </table>
    </div>
</section>
